<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>学生信息管理系统</h1>
    <form>
        <label for="stu_id">学号：</label>
        <input id="stu_id" type="text"><br>

        <label for="stu_name">姓名：</label>
        <input id="stu_name" type="text"><br>

        <label for="stu_sex">性别：</label>
        <input id="stu_sex" type="text"><br>

        <label for="stu_date">出生日期：</label>
        <input id="stu_date" type="text"><br>

        <label for="stu_hobby">爱好：</label>
        <input id="stu_hoddy" type="text"><br>

        <label for="stu_gbf">男女朋友：</label>
        <input id="stu_gbf" type="text"><br>

        <label for="stu_head_img">头像：</label>
        <input id="stu_head_img" type="text"><br>
        <button class="btns">点击提交</button>
    </form>
    <script src="../jquery/jquery-1.12.4.min.js"></script>
    <script>
        $('.btns').click((e)=>{
            //取消表单的默认行为
            e.preventDefault();
            $.ajax({
                method:'post',
                url:'http://localhost:3030/students_info',
                data:{
                    stu_id:$('#stu_id').val(),
                    stu_name:$('#stu_name').val(),
                    stu_sex:$('#stu_sex').val(),
                    stu_jg:$('#stu_jg').val(),
                    stu_date:$('#stu_date').val(),
                    stu_gbf:$('#stu_gbf').val(),
                    stu_hobby: $('#stu_hobby').val(),
                    stu_head_img:$('#stu_head_img').val()
                },
                success:(data)=>{
                    console.log(data);
                },
                error:err=>{
                    console.log(err);
                }
            })
        })
    </script>
</body>
</html>